{% extends 'base.html' %}

{% block title %}Gerenciamento de Chaves API - {{ block.super }}{% endblock %}

{% block content %}
<div class="section">
  <div class="row">
      <div class="col s12">
        <div class="card">
          <div class="card-content">
            <span class="card-title">Gerenciamento de Chaves da API</span>
            Veja mais informações sobre o uso das Chaves da API <a href="{{ api_keys_blogpost_url }}">neste post do blog do Brasil.IO</a>.
          </div>
        </div>
      </div>
  </div>

  {% if messages %}
  <div class="row">

    <ul class="messages">
        {% for message in messages %}
        <li class={% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}"dark-red"{% else %}"dark-green"{% endif %}>{{ message|safe }}</li>
        {% endfor %}
    </ul>
  </div>
  {% endif %}

  <div class="row table-container" style="padding-left: 0px; overflow: hidden;">
    <table id="api-tokens-table" class="mdl-data-table table-custom">
      <tr>
        <th>Chave</th>
        <th>Criada em</th>
        <th>Ações</th>
      </tr>

      {% for token in tokens %}
        <tr>
          <td><tt>{{ token.key }}</tt></td>
          <td>{{ token.created }}</td>
          <td><a href="{% url 'brasilio_auth:delete_api_token' token.key %}">Deletar chave</a></td>
        </tr>
      {% endfor %}
    </table>
  </div>
  {% if num_tokens_available %}
  <div class="row" style="text-align: right; display: block">
    <a style="display: inline-block" class="btn download-button" href="{{ demo_url }}">Ver exemplo de uso</a>
    <a style="display: inline-block" data-table-id="api-tokens-table" class="btn download-button" href="{% url 'brasilio_auth:create_api_token' %}">Criar nova Chave de API</a>
  </div>
  {% endif %}
</div>

{% endblock %}
